<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="100px">
      <el-form-item label="所属门店" prop="deptId">
        <treeselect
          style="width: 250px"
          v-model="queryParams.shopId"
          :options="deptList"
          :show-count="true"
          placeholder="请选择门店"
        />
      </el-form-item>
      <el-form-item label="日期">
        <el-date-picker
          v-model="dateRange"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd HH:mm"
          align="right"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="getList()">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini">重置</el-button>
      </el-form-item>
    </el-form>
    <el-card>
      <el-row>
        <el-col :span="12">
          当日情况：
          <br />
          共{{ orderInfo.totalOrderCount }}订单，{{orderInfo.totalCount}}菜。
          其中：A类菜：{{ orderInfo.totalACount }};B类菜：{{orderInfo.totalBCount}};C类菜：{{ orderInfo.totalCCount}}
          <br />
          共超时{{timeOutInfo.timeOutOrders}}订单，超时{{timeOutInfo.timeOutDishes}}菜，超时率{{(timeOutInfo.timeOutDishes/orderInfo.totalCount*100).toFixed(2)}}%。
          其中：A类菜{{timeOutInfo.timeOutADishes}}，B类菜{{timeOutInfo.timeOutBDishes}}，C类菜{{timeOutInfo.timeOutCDishes}}
          <br />
          菜品耗时：菜品平均耗时：{{ dishesInfo.avgConsumeTime }}分钟，历史最优：{{dishesInfo.minConsumeTime}}分钟；
          当日你总菜品{{dayTimeOutInfo.total_order}}，超时{{dayTimeOutInfo.time_out_order}}笔
          <span
            v-if="dayTimeOutInfo.total_order>0"
          >，占比{{ ((dayTimeOutInfo.time_out_order/dayTimeOutInfo.total_order)*100).toFixed(2) }}%；</span>
        </el-col>
        <el-col :span="12">
          当月情况：
          <br />
          截止到昨日，你当月总订单{{monthTimeOutInfo.total_order}}，超时订单{{monthTimeOutInfo.time_out_order}}
          <span
            v-if="monthTimeOutInfo.total_order>0"
          >，占比{{ ((monthTimeOutInfo.time_out_order/monthTimeOutInfo.total_order)*100).toFixed(2) }}%；</span>
          <br />
        </el-col>
      </el-row>
    </el-card>
    <el-tabs type="border-card" style="margin-top: 20px" v-model="tabActive" @tab-click="tabClick">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="100px">
        <el-form-item label="是否异常">
          <el-select
            v-model="queryParams.isException"
            clearable
            placeholder="请选择"
            @change="exceptionChange"
          >
            <el-option label="全部" value></el-option>
            <el-option label="正常" value="1"></el-option>
            <el-option label="异常" value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-tab-pane label="订单情况" name="order">
        <el-table :data="orderTableData" v-loading="loading" :row-class-name="orderRowClassName">
          <el-table-column prop="code" label="单号"></el-table-column>
          <el-table-column prop="deptName" label="门店"></el-table-column>
          <el-table-column prop="openTime" label="时间" width="180">
            <template slot-scope="scope">{{ parseTime(scope.row.openTime) }}</template>
          </el-table-column>
          <el-table-column prop="settleTime" label="结算时间" width="180">
            <template slot-scope="scope">{{ parseTime(scope.row.settleTime) }}</template>
          </el-table-column>
          <el-table-column label="订单耗时">
            <template slot-scope="scope">{{(scope.row.orderCallTime/60).toFixed(2)}}分钟</template>
          </el-table-column>
          <el-table-column prop="pointName" label="桌号"></el-table-column>
          <el-table-column prop="itemLastMoney" label="消费情况">
            <template slot-scope="scope">￥{{ scope.row.itemLastMoney }}</template>
          </el-table-column>
          <el-table-column prop="bsKcCount" label="菜品数量">
            <template slot-scope="scope">
              <span v-if="scope.row.atchTypeMaps['A']">高({{ scope.row.atchTypeMaps["A"] }})</span>
              <span v-if="scope.row.atchTypeMaps['B']">中({{ scope.row.atchTypeMaps["B"] }})</span>
              <span v-if="scope.row.atchTypeMaps['C']">低({{ scope.row.atchTypeMaps["C"] }})</span>
            </template>
          </el-table-column>
          <el-table-column prop="itemLastMoney" label="状态">
            <template slot-scope="scope">
              <span v-if="scope.row.settleTime">已完成</span>
              <span v-if="!scope.row.settleTime">未完成</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="queryOrder(scope.row)">详情</el-button>
              <!-- <el-button size="mini" type="text" @click="queryDishes(scope.row)"
            >菜品</el-button
              >-->
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="initOrderList"
        />
      </el-tab-pane>
      <el-tab-pane label="菜品情况" name="dishes">
        <el-table :data="dishesTableData" v-loading="loading" :row-class-name="orderRowClassName">
          <el-table-column prop="name" label="菜品"></el-table-column>
          <el-table-column prop="code" label="单号"></el-table-column>
          <el-table-column prop="pointName" label="桌号"></el-table-column>
          <el-table-column prop="callUpTime" label="开始时间"></el-table-column>
          <el-table-column prop="cookFinishTime" label="切配时间"></el-table-column>
          <el-table-column prop="serveFinishTime" label="加工时间"></el-table-column>
          <el-table-column label="出餐耗时">
            <template slot-scope="scope">{{(scope.row.orderCallTime/60).toFixed(2)}}分钟</template>
          </el-table-column>
          <!-- <el-table-column prop="address" label="是否异常"> </el-table-column> -->
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="initKscDataList"
        />
      </el-tab-pane>
      <el-tab-pane label="出餐情况" name="meal">
        <el-table :data="mealTableData" v-loading="loading" stripe>
          <el-table-column prop="deptName" label="门店"></el-table-column>
          <el-table-column prop="address" label="开始时间">
            <template>{{ dateRange[0] }}</template>
          </el-table-column>
          <el-table-column prop="date" label="结束时间">
            <template>
              <span></span>
              {{ dateRange[1] }}
            </template>
          </el-table-column>
          <el-table-column label="菜品数量">
            <template
              slot-scope="scope"
            >A({{scope.row.acount}})B({{scope.row.bcount}})C({{scope.row.ccount}})</template>
          </el-table-column>
          <el-table-column prop="avgCookTime" label="平均切配耗时"></el-table-column>
          <el-table-column prop="avgServeTime" label="平均加工耗时"></el-table-column>
          <el-table-column prop="avgTime" label="平均耗时"></el-table-column>
          <el-table-column prop="consumeTime" label="出餐耗时"></el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="initMealDataList"
        />
      </el-tab-pane>
    </el-tabs>

    <el-dialog title="订单详情" :visible.sync="orderDialog" width="800px">
      <el-descriptions class="margin-top" :column="3" size="mini" border>
        <el-descriptions-item label="单号">{{orderDetais.code}}</el-descriptions-item>
        <el-descriptions-item label="桌号">{{orderDetais.pointName}}</el-descriptions-item>

        <el-descriptions-item label="应收金额">{{orderDetais.itemOrigMoney}}</el-descriptions-item>
        <el-descriptions-item label="赠送金额">{{orderDetais.itemDiscMoney}}</el-descriptions-item>

        <el-descriptions-item label="收款金额">{{orderDetais.itemLastMoney}}</el-descriptions-item>
        <el-descriptions-item label="赠送原因">{{orderDetais.discInfo}}</el-descriptions-item>

        <el-descriptions-item label="开台时间">{{parseTime(orderDetais.openTime)}}</el-descriptions-item>
        <el-descriptions-item label="结算时间">{{parseTime(orderDetais.settleTime)}}</el-descriptions-item>
        <el-descriptions-item label="用餐时长">{{orderDetais.dinnerTime}}</el-descriptions-item>
        <el-descriptions-item label="菜品数量">{{orderDetais.bsKcCount}}</el-descriptions-item>
        <el-descriptions-item label="订单耗时">{{(orderDetais.orderCallTime/60).toFixed(2)}}分钟</el-descriptions-item>
      </el-descriptions>
      <el-table :data="disherList" style="margin-top: 10px;" border>
        <el-table-column property="itemName" label="菜品名称"></el-table-column>
        <el-table-column property="serveFinishTime" label="配菜时间"></el-table-column>
        <el-table-column property="cookFinishTime" label="上菜时间"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { treeselect as listDept } from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {
  getOrderList,
  getKscDataList,
  getOrderDataInfo,
  getTimeOutOrderAndKsc
} from "@/api/liangshi/order";
import {
  getKscListByBsId,
  getKscItemTypeDataInfo,
  getMealStatData,
  getDayTimeOutInfo,
  getMonthTimeOutInfo
} from "@/api/liangshi/kcKcs";
export default {
  components: { Treeselect },
  data() {
    return {
      tabActive: "order",
      // 遮罩层
      loading: false,
      orderDialog: false,
      disherList: [],
      orderDetais: {},
      // 总条数
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        shopId: 186974
      },
      orderInfo: {},
      dishesInfo: {},
      timeOutInfo: {},
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              const now = new Date();
              const startOfDay = new Date(
                now.getFullYear(),
                now.getMonth(),
                now.getDate()
              );
              const endOfDay = new Date(
                now.getFullYear(),
                now.getMonth(),
                now.getDate(),
                23,
                59,
                59
              );
              picker.$emit("pick", [startOfDay, endOfDay]);
            }
          },
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      dateRange: [],
      deptList: [],
      orderTableData: [],
      dishesTableData: [],
      mealTableData: [],
      monthTimeOutInfo: {},
      dayTimeOutInfo: {}
    };
  },
  created() {
    const now = new Date();
    const startOfDay = new Date(
      now.getFullYear(),
      now.getMonth(),
      now.getDate()
    );
    const endOfDay = new Date(
      now.getFullYear(),
      now.getMonth(),
      now.getDate(),
      23,
      59,
      59
    );
    this.dateRange = [this.parseTime(startOfDay), this.parseTime(endOfDay)];
    this.getDeptList();
    this.getList();
    this.initInfo();
  },
  methods: {
    initInfo() {
      const data = this.addDateRange(this.queryParams, this.dateRange, true);
      getOrderDataInfo(data).then(res => {
        this.orderInfo = res.data;
      });
      getKscItemTypeDataInfo(data).then(res => {
        this.dishesInfo = res.data;
      });
      getTimeOutOrderAndKsc(data).then(res => {
        this.timeOutInfo = res.data;
      });
      getDayTimeOutInfo(data).then(res => {
        this.dayTimeOutInfo = res.data;
      });
      getMonthTimeOutInfo(data).then(res => {
        this.monthTimeOutInfo = res.data;
      });
    },
    exceptionChange() {
      // console.log("thisthius",this.queryParams)
      this.getList();
    },
    initOrderList() {
      this.loading = true;
      const data = this.addDateRange(this.queryParams, this.dateRange, true);
      getOrderList(data).then(res => {
        this.loading = false;
        this.orderTableData = res.rows;
        this.total = res.total;
      });
    },
    initMealDataList() {
      this.loading = true;
      const data = this.addDateRange(this.queryParams, this.dateRange, true);
      getMealStatData(data).then(res => {
        this.loading = false;
        this.mealTableData = res.rows;
        this.total = res.total;
      });
    },

    queryOrder(row) {
      this.orderDialog = true;
      this.orderDetais = row;
      getKscListByBsId({ bsId: row.id }).then(res => {
        this.disherList = res.rows;
      });
    },

    initKscDataList() {
      this.loading = true;
      const data = this.addDateRange(this.queryParams, this.dateRange, true);
      getKscDataList(data).then(res => {
        this.loading = false;
        this.dishesTableData = res.rows;
        this.total = res.total;
      });
    },
    getList() {
      this.initInfo();
      this.tabClick();
    },
    getDeptList() {
      listDept().then(res => {
        this.deptList = res.data;
      });
    },
    orderRowClassName({ row, rowIndex }) {
      if (row.orderCallTime / 60 > 17) {
        return "warning-row";
      }
      // console.log("row,rowindex",row,rowIndex)
    },
    tabClick() {
      this.queryParams.pageNum = 1;
      this.total = 1;
      switch (this.tabActive) {
        case "order":
          this.initOrderList();
          break;
        case "dishes":
          this.initKscDataList();
          break;
        case "meal":
          this.initMealDataList();
          break;
      }
    }
  }
};
</script>

<style>
.el-table .warning-row {
  background: oldlace;
}
</style>